<template>
  <div style="height: 200px">
    <div class="top">
      <div style="
          height: 30px;
          width: 1004px;
          line-height: 30px;
          background-color: #f8f8f8;
          border-bottom: 1px solid #dcdcdc;
        " align="center">
        <span class="sp1" style="float: left; vertical-align: middle"><img src="../assets/images/laba.jpg" style="width: 14px; height: 13px" />
          <font style="margin-left: 10px">请不要使用可轻易获得的关于您的信息作为密码！</font>
        </span>
        <span v-if="isLogin" style="float: right" class="sp2"><a href="" @click="logout">退出登录</a></span>
        <span v-if="isLogin" style="float: right" class="sp2">|</span>
        <span v-if="isLogin" style="float: right; width: 130px; text-align: right" class="sp2"><router-link to="/Home/User">个人中心</router-link></span>
        <span v-if="isLogin" style="float: right" class="sp1">欢迎{{ user.nickname }}</span>
      </div>
      <div>
        <img src="../assets/images/topLogo.png" />
      </div>
    </div>
    <div id="nav" align="center">
      <ul id="menuNav">
        <li><router-link to="/Home/Index">首页</router-link></li>
        <li>
          <router-link :to="{ path: '/Home/GoodTopic', query: { goodType: 0 } }">帖子</router-link>
          <ul>
            <li>
              <router-link :to="{ path: '/Home/GoodTopic', query: { goodType: 0 } }">精品帖子</router-link>
            </li>
            <li>
              <router-link :to="{ path: '/Home/GoodTopic', query: { goodType: 1 } }">热门帖子</router-link>
            </li>
          </ul>
        </li>
        <li><router-link to="/Home/Section">版块</router-link></li>

        <li><a href="javascript:void(0)">帮助</a></li>
      </ul>
    </div>
    <div class="search" align="left">
      <input v-model="words" type="text" name="content" id="searchContent" style="
          width: 180px;
          height: 22px;
          font-size: 12px;
          background-color: white;
          border: 0;
          padding-left: 6px;
        " />
      <el-button @click="submitSearch" type="primary" icon="el-icon-search">搜索</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      words: "",
      isLogin: false,
    };
  },
  methods: {
    logout() {
      sessionStorage.removeItem("user");
      this.$message({
        message: "退出成功",
        type: "success",
        duration: 1000,
      });
      this.$router.push("/Home/Login");
    },
    submitSearch() {
      if (this.words === "") {
        console.log(this.user);
        return;
      }
      let words = this.words;
      let nowDate = Date.now();
      this.$router.push({
        path: "/Home/Search",
        query: { words: words, date: nowDate },
      });
    },
  },
  watch: {},
  mounted() {
    if (sessionStorage.getItem("login")) {
      this.isLogin = true;
    }
  },
};
</script>

<style scoped>
.sp1 {
  font-size: 12px;
}
.sp2 {
  margin-left: 20px;
  font-size: 12px;
}
body,
html {
  width: 1004px;
  padding: 0px;
  margin: 0px auto; /*设置居中  */
  text-align: center; /*兼容性更好  */
  background-color: #f8f8f8;
  border: none;
}

a {
  text-decoration: none;
}

a:link {
  color: black;
  text-decoration: none;
} /* 未被访问的链接 */
a:visited {
  color: black;
} /* 已被访问的链接 */
a:hover {
  text-decoration: underline;
  color: #67adf2;
} /* 鼠标指针移动到链接上 */
a:active {
  color: black;
  text-decoration: underline;
}

a img {
  border: none;
}

.top {
  width: 1004px;
  height: 150px;
  background-color: white;
}

.top img {
  height: 120px;
}

.search {
  width: 284px;
  height: 40px;
  margin-top: 3px;
  line-height: 40px;
  float: left;
  background-color: #6699cc;
}

#nav {
  position: relative;
  width: 720px;
  height: 40px;
  margin-top: 3px;
  float: left;
  background-color: #6699cc;
  z-index: 100;
}

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  list-style-type: none;
}

#nav ul li {
  position: relative;
  width: 110px;
  background: #6699cc;
  float: left;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  font-weight: bold;
}

#nav ul li a {
  /* border-right: 1px solid #e9e9e9; */
  color: white;
  height: 40px;
  line-height: 40px;
  text-decoration: none;
  display: block;
  text-align: center;
  overflow: hidden;
  text-decoration: none;
}

#nav ul li a:hover {
  font-weight: bold;
  background: #71aae3;
}

#nav ul li ul {
  display: none;
}

#nav ul li:hover ul {
  display: block;
  position: absolute;
  min-width: 190px;
  left: 0;
}

#nav ul li:hover ul li a {
  display: block;
  background: #6699cc;
  color: white;
  width: 110px;
  text-align: center;
  border-right: none;
}

#nav ul li:hover ul li a:hover {
  background: #71aae3;
  color: white;
}

.el-button {
  background-color: #fff;
  border-color: #fff;
  padding: 7px 10px;
  font-size: 12px;
  border: 0;
  color: #6699cc;
  font-weight: bolder;
  border-radius: 0;
}
</style>